<template>
	<view class="min-h-full p-10 static">
		<view class="flex flex-row flex-wrap rounded-lg bg-white" style="min-height: 80vh;box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)">
			<view class="w-full p-20 text-14" style="color: #5E5E5E;">
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<text class="text-bold" >用户昵称：</text>
					<!-- <input class="flex-1 text-14" type="text" placeholder="请输入用户昵称" placeholder-style="color:#B8B8B8" v-model="nickname"></input> -->
					<input class="flex-1 text-14" type="nickname" placeholder="请输入用户昵称" placeholder-style="color:#B8B8B8" v-model="nickname"></input>
				</view>
				<view class="bottom-line pt-12 pb-12 flex flex-row align-items-center">
					<view class="text-bold">用户头像：</view>
					<view class="text-0">
						<!-- <image style="width:80rpx; height:80rpx; border-radius: 50%;" mode="aspectFill" :src="avatar?avatar:'/static/logo.png'" @tap="uploadImage"></image> -->
						<button class="clear-wechat-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image style="width:80rpx; height:80rpx; border-radius: 50%;" mode="aspectFill" :src="avatar?avatar:'/static/logo.png'"></image>
						</button>
					</view>
				</view>
				<view class="w-full rounded-sm text-bold text-white text-center text-16 mt-20" style=" height:80rpx; line-height: 80rpx; background-color: #006BFF;" @tap="saveInfo">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import {uploadImage} from '/utils/util.js'
	import request from '/utils/request.js';
	export default {
		data() {
			return {
				nickname: '',
				avatar: '',
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			
		},
		onShow(){
			this.nickname = this.userInfo.nickname;
			this.avatar = this.userInfo.avatar;
			if(!this.userInfo.phone){
				uni.showToast({
					title: '请先登录',
					icon: 'none',
				})
				setTimeout(()=>{
					uni.navigateBack()
				}, 1000)
			}
		},
		onShareAppMessage() {
			return {
			  title: '飞兔接单',
			  path: '/pages/task/list',
			  // imageUrl : ''
			}
		},
		onShareTimeline() {
			return {
			  title: '飞兔接单',
			  // query: '',
			  // imageUrl : ''
			}
		},
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			// 上传头像
			uploadImage(){
				uploadImage({
					count: 1
				}).then(res=>{ 
					console.log(res)
					let file = res[0];
					this.avatar = file.url 
				})
			},
			// 保存信息
			saveInfo(){
				request.post('/pilot/saveInfo', {
					nickname: this.nickname,
					avatar: this.avatar,
				}).then(res=>{
					uni.showToast({
						title: '保存成功'
					})
					request.post('pilot/userInfo').then(res=>{
						this.setUserInfo(res);
						setTimeout(()=>{
							uni.navigateBack()	
						}, 1000)
					})
				})
			},
			// 选用微信头像
			onChooseAvatar(e){
				console.log(e);
				var tempFilePath = e.detail.avatarUrl;
				var that = this;
				uni.uploadFile({
					url: request.baseUrl + "/upload/file",
					filePath: tempFilePath,
					header: {
						token: uni.getStorageSync('token'),
						apptype: 'pilot_xcc',
						"Content-Type": "application/json; charset=UTF-8",
					},
					name: 'file',
					formData: {},
					success: (res) => {
						if(res.statusCode == 200){
							let response = JSON.parse(res.data);
							if(response.code == 1){
								that.avatar = response.data.url
							}else{
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
						}else{
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
					},
					fail: (res) => {
						console.log(res);
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFF8F5;
	}
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
	.clear-wechat-btn{
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		background-color: rgba(255, 255, 255, 0);
		border-radius: 0;
		box-sizing: border-box;
		color: rgba(255, 255, 255, 0);
		cursor: pointer;
		display: block;
		font-size: 0;
		line-height: 0;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
		position: relative;
		text-align: center;
		text-decoration: none;
		border: none;
	}
	.clear-wechat-btn::after{
		border: none;
	}
</style>
